<template>
<a-space>
    <a-input placeholder="搜索项目名称" v-model:value="form.searchValue" allowClear>
        <template #prefix><search-outlined/></template>
    </a-input>
    <a-select placeholder="选择负责人" class="width-sm" v-model:value="form.user_id" allowClear></a-select>
    <a-select placeholder="选择项目状态" style="width: 100%" v-model:value="form.status" allowClear></a-select>
    <a-range-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model:value="form.date" class="width-md" allowClear/>
    <a-button type="primary" @click="onSearch"><search-outlined/>搜索</a-button>
</a-space>
</template>

<script lang="ts" setup>
import { SearchOutlined } from '@ant-design/icons-vue';
import { reactive } from 'vue';

const emits = defineEmits(['search'])

const form = reactive<ProjectSearchParamsType>({
    searchValue:'',
    user_id:undefined,
    status:undefined,
    date:[undefined,undefined]
})
const onSearch = ()=>{
    //如果form所有值为空，则不触发
    if(
        form.searchValue === '' && 
        form.user_id === undefined && 
        form.status === undefined && 
        form.date[0] === undefined && 
        form.date[1] === undefined){
            return false
        }
    emits('search',form)
}
</script>

<style scoped>

</style>